<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>picture</title>
    <th:block th:include="base::header"/>
    <style>
        .img{
            width: 72%;
            position: absolute;
            bottom: 6px;
            border: 1px greenyellow solid;
        }
        .img:hover{
            cursor: pointer;
            border: 2px black solid;
        }
        .block{
            width: 70px;
            height: 120px;
            float: left;
            padding: 10px;
            margin: 10px;
            /*border: 1px red solid;*/
            position: relative;
        }
        .active{
            width: 70px;
            height: 120px;
            float: left;
            padding: 10px;
            margin: 10px;
            /*border: 1px red solid;*/
            position: relative;
            background-color: #2D93CA;
        }

        body{
            padding: 0px 10px;
        }

    </style>
</head>
<body>
    <!--<table >
        <tr >
            <td th:each="item:${images}"><img th:src="@{${item}}"></td>
        </tr>
    </table>-->
    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-card">
                <div id="head" class="layui-card-header">
                    <button id="edit" onclick="startEdit()" class="layui-btn">编辑</button>
                </div>
                <div class="layui-card-body layui-container">
                    <div class="layui-row" id="card">

                    </div>

                </div>
            </div>
        </div>
    </div>
    <input id="upload" type="file" multiple="multiple" style="display: none" onchange="upload(this)">
</body>
<script type="text/javascript" th:inline="javascript">

    var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    var id=[[${id}]];
    var data=[];
    var editable=false;
    var selectedPic=[];
    $(function () {
        getPicture();
    });
    function getPicture() {
        $.ajax({
            url:basePath+"/order/getpicture",
            data:{'id':id},
            type:"GET",
            dataType:"json",
            success:function (res) {
               console.log(res);
               loadPicture(res);
               data=res;
            }
        });
    }

    function loadPicture(data) {
        $("#card").empty();
        $.each(data,function(index, item) {
            var a="123";
            var title=item.substring(item.lastIndexOf("/")+1);
            var div=$("<div class='block'></div>");
            var img=$("<img class='img'>").attr('src',basePath+item).attr('title',title).attr('alt',title);
            div.append(img);
            img.click(function () {
                selected(this)
            })
            $("#card").append(div);
        });
    }

    function startEdit() {
        editable=true;
        $("#head").empty();
        var add=$("<button id='add' onclick='add()' class='layui-btn'>添加</button>");
        var del=$("<button id='delete' onclick='del()' class='layui-btn'>删除</button>");
        var done=$("<button id='done' onclick='done()' class='layui-btn'>完成</button>");
        $("#head").append(add).append(del).append(done);
    }
    function add(){
        $("#upload").click();
    }
    function del() {
        var r=confirm('确定删除');
        if (r==true){
            $.each(selectedPic,function (index,item) {
                if (data.includes(item)){
                    data.splice(data.indexOf(item),1);
                }
            })
            var dels=selectedPic.join();
            var imgs=data.join();
            $.ajax({
                url:basePath+"/order/deletepic",
                data:{'data':imgs,'dels':dels,'id':id},
                type: 'POST',
                dataType:'json',
                success:function (res) {
                    alert('删除成功');
                }
            });
            console.log(data);
            loadPicture(data);
        }else {
            loadPicture(data);
            selectedPic=[];
        }

    }
    function done() {
        location.reload();
    }

    function upload(obj) {
        console.log($(obj));
        var files=$(obj).prop('files');
        if (files.length==0){
            alert('请选择文件');
            return;
        }else{
            var formData=new FormData();
            $.each(files,function (index,item) {
                formData.append('files',item,item.name);
            })
            formData.append('id',id);
            console.log(formData.get('files'));
            $.ajax({
                url: basePath+"/order/uploadpic",
                type: "POST",
                data: formData,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                success(res) {
                    console.log(res);
                    alert(res.msg);
                    getPicture();
                }
            });
        }
    }

    function selected(img) {
        //console.log(img);
        var c=$(img).parent().attr('class');
        var src=$(img).attr('src').substring(21);
        if (editable==false){
            $(img).parent().attr('class','active');
            $(img).parent().attr('class','block');
        }else{
            if (c=='block'){
                $(img).parent().attr('class','active');
                selectedPic.push(src);
            }else{
                $(img).parent().attr('class','block');
                if (selectedPic.includes(src)){
                    delete selectedPic[selectedPic.indexOf(src)];
                }
            }
            console.log(selectedPic);
        }
    }
</script>
</html>